<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{$t('Membership_data')}}</span>
      </div>
      <el-row>
        <el-col :span="24" align="center">
          <el-select clearable v-model="listQuery.registerType" placeholder="请选择注册类型" style="width: 200px;">
            <el-option label="手机注册" :value="0"></el-option>
            <el-option label="邮箱注册" :value="1"></el-option>
            <el-option label="Apple ID" :value="2"></el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">查询</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;">
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: red;">{{overview.userTodayCount}}</span>
          </el-row>
          <el-row>
            {{$t('Today_new_memberships')}}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: red;">{{overview.userYesterdayCount}}</span>
          </el-row>
          <el-row>
            {{$t('Yesterday_new_memeberships')}}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: red;">{{overview.userMonthCount}}</span>
          </el-row>
          <el-row>
            {{$t('This_month_new_memberships')}}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: red;">{{overview.userTotal}}</span>
          </el-row>
          <el-row>
            {{$t('Total_members')}}
          </el-row>
        </el-col>
      </el-row>
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{$t('Membership_growth')}}</span>
          <div style="display: inline;float: right;">
            <div v-show="countFilterType ==1" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="dateRange" type="daterange" @change="handleDateChange" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd hh:mm" :placeholder="$t('Select_dates')">
              </el-date-picker>
            </div>
            <div v-show="countFilterType ==2" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="dateRange" type="monthrange" @change="handleDateChange" format="yyyy-MM"
                value-format="yyyy-MM-dd hh:mm" :placeholder="$t('选择月份')" style="width:350px;">
              </el-date-picker>
            </div>
          </div>
          <div style="display: inline;float: right;width: 120px;">
            <el-select v-model="countFilterType" @change="changeType">
              <el-option :label="$t('By_day')" :value="1"></el-option>
              <el-option :label="$t('By_month')" :value="2"></el-option>
            </el-select>
          </div>
          <!--            <div style="display: inline;float: right;">
                        <el-button style="display: inline;" @click="exportSales()">导出数据</el-button>
                      </div>-->
        </div>
        <ve-line :data="lineData" :settings="lineSettings" :extend="chartExtend"></ve-line>
        <div align="center">{{$t('日期')}}</div>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{$t('Member_purchasing_data')}}</span>
          <div style="margin-top: 10px;">
<!--            <el-select v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">-->
<!--              <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>-->
<!--            </el-select>-->
<!--            <el-select v-model="listQuery.orderSources" clearable class="filter-item" multiple-->
<!--                       :placeholder="$t('请选择消费来源')">-->
<!--              <el-option v-for="item in orderSourceList" :key="item.id" :value="item.id" :label="item.name"></el-option>-->
<!--            </el-select>-->
<!--            <el-input v-model="listQuery.userName" clearable class="filter-item" style="width: 200px;"
              :placeholder="$t('请输入用户名称')" />-->
<!--            <el-select v-model="listQuery.payType" class="filter-item" clearable placeholder="请选择支付方式">-->
<!--              <el-option v-for="item in payTypes" :key="item.value" :label="item.label" :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--            <el-button class="filter-item" type="primary" icon="el-icon-search"-->
<!--              @click="handleFilter">{{$t('Search')}}</el-button>-->
            <div v-show="amountFilterType ==1" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="listQuery.timeHorizon" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
                align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")'
                :end-placeholder='$t("结束日期")' :picker-options="pickerOptions">
              </el-date-picker>
              <!-- <el-date-picker
                v-model="amountDateRange"
                type="daterange"
                @change="handleAmountDateChange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd hh:mm"
                :placeholder="$t('Select_dates')" style="width:350px;">
              </el-date-picker> -->
            </div>
            <div v-show="amountFilterType ==2" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="amountDateRange" type="monthrange" @change="handleAmountDateChange"
                format="yyyy-MM" value-format="yyyy-MM-dd hh:mm" :placeholder="$t('选择月份')" style="width:350px;">
              </el-date-picker>
            </div>
            <div style="display: inline;float: right;width: 120px;">
              <el-select v-model="amountFilterType" @change="amountChangeType">
                <el-option :label="$t('By_day')" :value="1"></el-option>
                <el-option :label="$t('By_month')" :value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div style="display: inline;float: right;">

          </div>

          <!--            <div style="display: inline;float: right;">
                        <el-tabs v-model="activeTable" type="card" @tab-click="handleClick">
                          <el-tab-pane label="昨天" name="1"></el-tab-pane>
                          <el-tab-pane label="最近7天" name="7"></el-tab-pane>
                          <el-tab-pane label="最近30天" name="30"></el-tab-pane>
                        </el-tabs>
                      </div>-->
          <!--            <div style="display: inline;float: right;">
                        <el-button style="display: inline;" @click="exportSales()">导出数据</el-button>
                      </div>-->
        </div>
        <ve-histogram :data="chartData" :settings="histogramSettings"></ve-histogram>
        <div align="center">{{$t('金额')}}({{$t('单位')}}:$)</div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
  const chartRowMap = {
    fifty: '0-50',
    hundred: '51-100',
    twoHundred: '101-200',
    fiveHundred: '201-500',
    thousand: '501-1000',
    fiveThousand: '1001-5000',
    tenThousand: '5001-10000',
    greaterThanTenThousand: '10001以上'

  }
  import VeHistogram from 'v-charts/lib/histogram.common'
  import VeLine from 'v-charts/lib/line.common'
  import { queryUserStatistics, queryAddUserStatistics } from '@/api/statistics'
  import { formatDate } from '@/utils/date'
  import { transactionData } from '@/api/statistics'
  import { allForPerm } from '@/api/shop'
  export default {
    name: 'userStatistics',
    components: { VeHistogram, VeLine },
    data() {
      const startDate = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 60), 'yyyy-MM-dd hh:mm')
      const endDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
      return {
        payTypes: [{ value: 1, label: '现金支付' },
        { value: 2, label: '礼物卡支付' },
        { value: 3, label: 'PayPal支付' },
        { value: 4, label: '余额支付' },
        { value: 5, label: 'Clover支付' },
        { value: 6, label: '积分支付' },],
        orderSourceList: [
          { id: 1, name: '手机app下单' },
          { id: 2, name: '门店下单' },
          { id: 3, name: '官网商城' },
          { id: 4, name: '订阅' },
        ],
        shops:[],
        listQuery: {
          // page: 1,
          // limit: 20,
          // searchDate: undefined,

          userName: undefined,
          orderSn: undefined,

          shopIds: undefined,
          payType: undefined,
          orderSources: undefined,
          orderTypes: undefined,
          timeHorizon: [startDate, endDate],
          registerType: undefined,
        },
        lineSettings: {
          yAxisName: [this.$t('数量')],
          // xAxisType: 'time'
          yAxisAxisStick: {
            length: 1
          }

        },
        chartExtend: {
          'yAxis.0.minInterval': 1
        },
        histogramSettings: {
          yAxisName: [this.$t('会员数')]
          // xAxisType: 'time'
        },
        chartRowMap,
        overview: {
          userTodayCount: 0,
          userYesterdayCount: 0,
          userMonthCount: 0,
          userTotal: 0
        },
        dateRange: [startDate, endDate],
        amountDateRange: [startDate, endDate],
        activeTable: '1',
        countFilterType: 1,
        amountFilterType: 1,
        chartData: {
          columns: ['amount', 'sales'],
          rows: []
        },
        lineData: {
          columns: ['addTime', 'count'],
          rows: [
            { '日期': '01月', '新增会员数': 1393 },
            { '日期': '02月', '新增会员数': 3530 },
            { '日期': '03月', '新增会员数': 2923 },
            { '日期': '04月', '新增会员数': 1723 },
            { '日期': '05月', '新增会员数': 3792 },
            { '日期': '06月', '新增会员数': 4593 }
          ]
        },
        pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },

      }
    },
    created() {
      this.getData()
      this.getTransactionData()
      allForPerm().then(response=>{
        this.shops = response.data.data.list
      })
    },
    methods: {
      getData() {
        let param = {
          registerType: this.listQuery.registerType,
          startTime: this.dateRange[0],
          endTime: this.dateRange[1]
        }
        queryUserStatistics(param).then(res => {
          this.overview = res.data.data.data
        })

        queryAddUserStatistics(param).then(res => {
          this.lineData.rows = res.data.data.data
        })
      },
      getTransactionData() {
        // let param1 = {
        //   startTime: this.amountDateRange[0],
        //   endTime: this.amountDateRange[1]
        // }
        this.chartData.rows.splice(0, this.chartData.rows.length)
        transactionData(this.listQuery).then(response => {
          if (response.data.data) {
            for (let item in response.data.data) {
              this.chartData.rows.push({
                amount: item,
                sales: response.data.data[item]
              })
            }
          }
        })
      },
      handleFilter() {
        // 确保 listQuery.registerType 被正确传入接口参数
        this.getData()
      },
      handleAmountDateChange(dateRange) {
        console.log(dateRange)
        this.amountDateRange = dateRange
        this.getTransactionData()
      },
      handleDateChange(dateRange) {
        console.log(dateRange)
        this.dateRange = dateRange
        this.getData()
      },
      amountChangeType() {
        this.getTransactionData()
      }
      ,
      changeType() {
        this.getData()
      }
    }
  }
</script>

<style scoped>

</style>
